/**
 * Created by wuyunqiang on.
 */
import React, { Component } from 'react';
import {
  Text, View, TouchableOpacity, Platform
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ifIphoneX from '../utils/iphoneX';

const HeaderMarginLeftAndRight = SCALE(30); // header 距离左右的间距

export default class Header extends Component {
  renderLeftView = () => {
    const { navigation, textColor } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          navigation.goBack(null);
        }}
      >
        <Icon
          name="ios-arrow-back"
          style={{ marginLeft: HeaderMarginLeftAndRight }}
          size={24}
          color={textColor || '#fff'}
        />
      </TouchableOpacity>
    );
  };

  renderCenterView = () => {
    const { centerTxt, textColor } = this.props;
    if (centerTxt) {
      return (
        <Text numberOfLines={1} style={{ fontSize: FONT(20), color: textColor || '#fff' }}>
          {centerTxt}
        </Text>
      );
    }
    return null;
  };

  renderRightView = () => {
    const { rightTxt, rightClick, textColor } = this.props;
    if (rightTxt) {
      return (
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => {
            rightClick && rightClick();
          }}
        >
          <View
            style={{
              width: Platform.OS === 'ios' ? 55 / 2 : SCALE(55),
              height: Platform.OS === 'ios' ? 55 / 2 : SCALE(55),
              justifyContent: 'center',
              marginRight: HeaderMarginLeftAndRight
            }}
          >
            <Text style={{ fontSize: FONT(28 / 2), color: textColor || '#fff' }}>{rightTxt}</Text>
          </View>
        </TouchableOpacity>
      );
    }
    return null;
  };

  render() {
    const {
      backgroundColor, renderLeftView, renderCenterView, renderRightView
    } = this.props;
    return (
      <View
        style={{
          backgroundColor: backgroundColor || '#1a77be',
          ...header
        }}
      >
        <View style={{ width: WIDTH / 3 }}>
          {renderLeftView ? renderLeftView() : this.renderLeftView()}
        </View>

        <View
          style={{
            minWidth: WIDTH / 3,
            maxWidth: WIDTH / 2,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          {renderCenterView ? renderCenterView() : this.renderCenterView()}
        </View>
        <View
          style={{
            width: WIDTH / 3,
            flexDirection: 'row',
            justifyContent: 'flex-end',
            alignItems: 'center'
          }}
        >
          {renderRightView ? renderRightView() : this.renderRightView()}
        </View>
      </View>
    );
  }
}

const header = {
  ...ifIphoneX(
    {
      paddingTop: 44,
      height: 88
    },
    {
      paddingTop: Platform.OS === 'ios' ? 20 : 20,
      height: Platform.OS === 'ios' ? 64 : 64
    }
  ),
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center'
};
